<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
      <!-- Favicon -->
      <link rel="shortcut icon" href="images/favicon.ico" />
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <!-- Typography CSS -->
      <link rel="stylesheet" href="css/typography.css">
      <!-- Style CSS -->
      <link rel="stylesheet" href="css/style.css">
      <!-- Responsive CSS -->
      <link rel="stylesheet" href="css/responsive.css">
   </head>
   <body>
      <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
      <!-- Wrapper Start -->
      <div class="wrapper">
         <!-- Sidebar  -->
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="index.html">
               <img src="images/logo.png" class="img-fluid" alt="">
               <span>XRay</span>
               </a>
               <div class="iq-menu-bt-sidebar">
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
               </div>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>Dashboard</span></li>
                     <li>
                        <a href="index.html" class="iq-waves-effect"><i class="ri-hospital-fill"></i><span>Doctor Dashboard</span></a>
                     </li>                     
                     <li>
                        <a href="dashboard-1.html" class="iq-waves-effect"><i class="ri-home-8-fill"></i><span>Hospital Dashboard 1 </span></a>
                     </li>
                     <li>
                        <a href="dashboard-2.html" class="iq-waves-effect"><i class="ri-briefcase-4-fill"></i><span>Hospital Dashboard 2</span></a>
                     </li>
                     <li>
                        <a href="dashboard-3.html" class="iq-waves-effect"><i class="ri-group-fill"></i><span>Patient Dashboard</span></a>
                     </li>
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>Apps</span></li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-mail-open-fill"></i><span>Email</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="app/index.html"><i class="ri-inbox-fill"></i>Inbox</a></li>
                           <li><a href="app/email-compose.html"><i class="ri-edit-2-fill"></i>Email Compose</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-3-fill"></i><span>Doctors</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="doctor-list.html"><i class="ri-file-list-fill"></i>All Doctors</a></li>
                           <li><a href="add-doctor.html"><i class="ri-user-add-fill"></i> Add Doctor</a></li>
                           <li><a href="profile.html"><i class="ri-profile-fill"></i>Doctor Profile</a></li>
                           <li><a href="profile-edit.html"><i class="ri-file-edit-fill"></i> Edit Doctor</a></li>
                        </ul>
                     </li>
                     <li><a href="calendar.html" class="iq-waves-effect"><i class="ri-calendar-event-fill"></i><span>Calendar</span></a></li>
                    
                    <li><a href="chat.html" class="iq-waves-effect"><i class="ri-message-fill"></i><span>Chat</span></a></li>
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>Components</span></li>
                     <li class="active">
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-apps-fill"></i><span>UI Elements</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="ui-colors.html"><i class="ri-font-color"></i>colors</a></li>
                           <li><a href="ui-typography.html"><i class="ri-text"></i>Typography</a></li>
                           <li><a href="ui-alerts.html"><i class="ri-alert-fill"></i>Alerts</a></li>
                           <li><a href="ui-badges.html"><i class="ri-building-3-fill"></i>Badges</a></li>
                           <li><a href="ui-breadcrumb.html"><i class="ri-guide-fill"></i>Breadcrumb</a></li>
                           <li><a href="ui-buttons.html"><i class="ri-checkbox-blank-fill"></i>Buttons</a></li>
                           <li><a href="ui-cards.html"><i class="ri-bank-card-fill"></i>Cards</a></li>
                           <li><a href="ui-carousel.html"><i class="ri-slideshow-4-fill"></i>Carousel</a></li>
                           <li><a href="ui-embed-video.html"><i class="ri-movie-fill"></i>Video</a></li>
                           <li class="active"><a href="ui-grid.html"><i class="ri-grid-fill"></i>Grid</a></li>
                           <li><a href="ui-images.html"><i class="ri-image-fill"></i>Images</a></li>
                           <li><a href="ui-list-group.html"><i class="ri-file-list-fill"></i>list Group</a></li>
                           <li><a href="ui-media-object.html"><i class="ri-camera-fill"></i>Media</a></li>
                           <li><a href="ui-modal.html"><i class="ri-checkbox-blank-fill"></i>Modal</a></li>
                           <li><a href="ui-notifications.html"><i class="ri-notification-3-fill"></i>Notifications</a></li>
                           <li><a href="ui-pagination.html"><i class="ri-more-fill"></i>Pagination</a></li>
                           <li><a href="ui-popovers.html"><i class="ri-folder-shield-fill"></i>Popovers</a></li>
                           <li><a href="ui-progressbars.html"><i class="ri-battery-low-fill"></i>Progressbars</a></li>
                           <li><a href="ui-tabs.html"><i class="ri-database-fill"></i>Tabs</a></li>
                           <li><a href="ui-tooltips.html"><i class="ri-record-mail-fill"></i>Tooltips</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-device-fill"></i><span>Forms</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="form-layout.html"><i class="ri-tablet-fill"></i>Form Elements</a></li>
                           <li><a href="form-validation.html"><i class="ri-device-fill"></i>Form Validation</a></li>
                           <li><a href="form-switch.html"><i class="ri-toggle-fill"></i>Form Switch</a></li>
                           <li><a href="form-chechbox.html"><i class="ri-chat-check-fill"></i>Form Checkbox</a></li>
                           <li><a href="form-radio.html"><i class="ri-radio-button-fill"></i>Form Radio</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-file-word-fill"></i><span>Forms Wizard</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="form-wizard.html"><i class="ri-anticlockwise-fill"></i>Simple Wizard</a></li>
                           <li><a href="form-wizard-validate.html"><i class="ri-anticlockwise-2-fill"></i>Validate Wizard</a></li>
                           <li><a href="form-wizard-vertical.html"><i class="ri-clockwise-fill"></i>Vertical Wizard</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-table-fill"></i><span>Table</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="tables-basic.html"><i class="ri-table-fill"></i>Basic Tables</a></li>
                           <li><a href="data-table.html"><i class="ri-table-2"></i>Data Table</a></li>
                           <li><a href="table-editable.html"><i class="ri-archive-drawer-fill"></i>Editable Table</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-bar-chart-2-fill"></i><span>Charts</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="chart-morris.html"><i class="ri-file-chart-fill"></i>Morris Chart</a></li>
                           <li><a href="chart-high.html"><i class="ri-bar-chart-fill"></i>High Charts</a></li>
                           <li><a href="chart-am.html"><i class="ri-bar-chart-box-fill"></i>Am Charts</a></li>
                           <li><a href="chart-apex.html"><i class="ri-pie-chart-box-fill"></i>Apex Chart</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-copper-coin-fill"></i><span>Icons</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="icon-dripicons.html"><i class="ri-stack-fill"></i>Dripicons</a></li>
                           <li><a href="icon-fontawesome-5.html"><i class="ri-facebook-fill"></i>Font Awesome 5</a></li>
                           <li><a href="icon-lineawesome.html"><i class="ri-keynote-fill"></i>line Awesome</a></li>
                           <li><a href="icon-remixicon.html"><i class="ri-remixicon-fill"></i>Remixicon</a></li>
                           <li><a href="icon-unicons.html"><i class="ri-underline"></i>unicons</a></li>
                        </ul>
                     </li>
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>Pages</span></li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-server-fill"></i><span>Authentication</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="sign-in.html"><i class="ri-login-box-fill"></i>Login</a></li>
                           <li><a href="sign-up.html"><i class="ri-logout-box-fill"></i>Register</a></li>
                           <li><a href="pages-recoverpw.html"><i class="ri-record-mail-fill"></i>Recover Password</a></li>
                           <li><a href="pages-confirm-mail.html"><i class="ri-chat-check-fill"></i>Confirm Mail</a></li>
                           <li><a href="pages-lock-screen.html"><i class="ri-file-lock-fill"></i>Lock Screen</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-map-pin-2-fill"></i><span>Maps</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="pages-map.html"><i class="ri-google-fill"></i>Google Map</a></li>
                           <li><a href="#"><i class="ri-map-pin-range-line"></i>Vector Map</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-folders-fill"></i><span>Extra Pages</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="pages-timeline.html"><i class="ri-map-pin-time-fill"></i>Timeline</a></li>
                           <li><a href="pages-invoice.html"><i class="ri-question-answer-fill"></i>Invoice</a></li>
                           <li><a href="blank-page.html"><i class="ri-checkbox-blank-fill"></i>Blank Page</a></li>
                           <li><a href="pages-error.html"><i class="ri-error-warning-fill"></i>Error 404</a></li>
                           <li><a href="pages-error-500.html"><i class="ri-error-warning-fill"></i>Error 500</a></li>
                           <li><a href="pages-pricing.html"><i class="ri-price-tag-3-fill"></i>Pricing</a></li>
                           <li><a href="pages-pricing-one.html"><i class="ri-price-tag-2-fill"></i>Pricing 1</a></li>
                           <li><a href="pages-maintenance.html"><i class="ri-git-repository-commits-fill"></i>Maintenance</a></li>
                           <li><a href="pages-comingsoon.html"><i class="ri-run-fill"></i>Coming Soon</a></li>
                           <li><a href="pages-faq.html"><i class="ri-compasses-2-fill"></i>Faq</a></li>
                        </ul>
                     </li>
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
            <div class="iq-top-navbar">
               <div class="iq-navbar-custom">
                  <div class="iq-sidebar-logo">
                     <div class="top-logo">
                        <a href="index.html" class="logo">
                        <img src="images/logo.png" class="img-fluid" alt="">
                        <span>XRay</span>
                        </a>
                     </div>
                  </div>
                  <nav class="navbar navbar-expand-lg navbar-light p-0">
                     <div class="iq-search-bar">
                        <form action="#" class="searchbox">
                           <input type="text" class="text search-input" placeholder="Type here to search...">
                           <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                        </form>
                     </div>
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                     <i class="ri-menu-3-line"></i>
                     </button>
                     <div class="iq-menu-bt align-self-center">
                        <div class="wrapper-menu">
                           <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                        </div>
                     </div>
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navbar-list">
                           <li class="nav-item">
                              <a class="search-toggle iq-waves-effect language-title" href="#"><img src="images/small/flag-01.png" alt="img-flaf" class="img-fluid mr-1" style="height: 16px; width: 16px;" /> English <i class="ri-arrow-down-s-line"></i></a>
                              <div class="iq-sub-dropdown">
                                 <a class="iq-sub-card" href="#"><img src="images/small/flag-02.png" alt="img-flaf" class="img-fluid mr-2" />French</a>
                                 <a class="iq-sub-card" href="#"><img src="images/small/flag-03.png" alt="img-flaf" class="img-fluid mr-2" />Spanish</a>
                                 <a class="iq-sub-card" href="#"><img src="images/small/flag-04.png" alt="img-flaf" class="img-fluid mr-2" />Italian</a>
                                 <a class="iq-sub-card" href="#"><img src="images/small/flag-05.png" alt="img-flaf" class="img-fluid mr-2" />German</a>
                                 <a class="iq-sub-card" href="#"><img src="images/small/flag-06.png" alt="img-flaf" class="img-fluid mr-2" />Japanese</a>
                              </div>
                           </li>
                           <li class="nav-item iq-full-screen">
                              <a href="#" class="iq-waves-effect" id="btnFullscreen"><i class="ri-fullscreen-line"></i></a>
                           </li>
                           <li class="nav-item">
                              <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                              <div class="iq-sub-dropdown">
                                 <div class="iq-card shadow-none m-0">
                                    <div class="iq-card-body p-0 ">
                                       <div class="bg-primary p-3">
                                          <h5 class="mb-0 text-white">All Notifications<small class="badge  badge-light float-right pt-1">4</small></h5>
                                       </div>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/01.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Emma Watson Bini</h6>
                                                <small class="float-right font-size-12">Just Now</small>
                                                <p class="mb-0">95 MB</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/02.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">New customer is join</h6>
                                                <small class="float-right font-size-12">5 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/03.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Two customer is left</h6>
                                                <small class="float-right font-size-12">2 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/04.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">New Mail from Fenny</h6>
                                                <small class="float-right font-size-12">3 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                           <li class="nav-item dropdown">
                              <a href="#" class="search-toggle iq-waves-effect">
                              <i class="ri-mail-open-fill"></i>
                              <span class="bg-primary count-mail"></span>
                           </a>
                              <div class="iq-sub-dropdown">
                                 <div class="iq-card shadow-none m-0">
                                    <div class="iq-card-body p-0 ">
                                       <div class="bg-primary p-3">
                                          <h5 class="mb-0 text-white">All Messages<small class="badge  badge-light float-right pt-1">5</small></h5>
                                       </div>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/01.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Bini Emma Watson</h6>
                                                <small class="float-left font-size-12">13 Jun</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/02.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Lorem Ipsum Watson</h6>
                                                <small class="float-left font-size-12">20 Apr</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/03.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Why do we use it?</h6>
                                                <small class="float-left font-size-12">30 Jun</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/04.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Variations Passages</h6>
                                                <small class="float-left font-size-12">12 Sep</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="images/user/05.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Lorem Ipsum generators</h6>
                                                <small class="float-left font-size-12">5 Dec</small>
                                             </div>
                                          </div>
                                       </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <ul class="navbar-list">
                        <li>
                           <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                              <img src="images/user/1.jpg" class="img-fluid rounded mr-3" alt="user">
                              <div class="caption">
                                 <h6 class="mb-0 line-height">Bini Jets</h6>
                                 <span class="font-size-12">Available</span>
                              </div>
                           </a>
                           <div class="iq-sub-dropdown iq-user-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white line-height">Hello Bini Jets</h5>
                                       <span class="text-white font-size-12">Available</span>
                                    </div>
                                    <a href="profile.html" class="iq-sub-card iq-bg-primary-hover">
                                       <div class="media align-items-center">
                                          <div class="rounded iq-card-icon iq-bg-primary">
                                             <i class="ri-file-user-line"></i>
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">My Profile</h6>
                                             <p class="mb-0 font-size-12">View personal profile details.</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="profile-edit.html" class="iq-sub-card iq-bg-primary-hover">
                                       <div class="media align-items-center">
                                          <div class="rounded iq-card-icon iq-bg-primary">
                                             <i class="ri-profile-line"></i>
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Edit Profile</h6>
                                             <p class="mb-0 font-size-12">Modify your personal details.</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="account-setting.html" class="iq-sub-card iq-bg-primary-hover">
                                       <div class="media align-items-center">
                                          <div class="rounded iq-card-icon iq-bg-primary">
                                             <i class="ri-account-box-line"></i>
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Account settings</h6>
                                             <p class="mb-0 font-size-12">Manage your account parameters.</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="privacy-setting.html" class="iq-sub-card iq-bg-primary-hover">
                                       <div class="media align-items-center">
                                          <div class="rounded iq-card-icon iq-bg-primary">
                                             <i class="ri-lock-line"></i>
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Privacy Settings</h6>
                                             <p class="mb-0 font-size-12">Control your privacy parameters.</p>
                                          </div>
                                       </div>
                                    </a>
                                    <div class="d-inline-block w-100 text-center p-3">
                                       <a class="bg-primary iq-sign-btn" href="sign-in.html" role="button">Sign out<i class="ri-login-box-line ml-2"></i></a>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </nav>
               </div>
            </div>
            <!-- TOP Nav Bar END -->
            <div class="container-fluid">
               <div class="row">
                  <div class="col-sm-12">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Grid options</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table..</p>
                           <table class="table table-bordered table-striped">
                              <thead>
                                 <tr>
                                    <th></th>
                                    <th class="text-center">
                                       Extra small<br>
                                       <small>&lt;576px</small>
                                    </th>
                                    <th class="text-center">
                                       Small<br>
                                       <small>≥576px</small>
                                    </th>
                                    <th class="text-center">
                                       Medium<br>
                                       <small>≥768px</small>
                                    </th>
                                    <th class="text-center">
                                       Large<br>
                                       <small>≥992px</small>
                                    </th>
                                    <th class="text-center">
                                       Extra large<br>
                                       <small>≥1200px</small>
                                    </th>
                                 </tr>
                              </thead>
                              <tbody>
                                 <tr>
                                    <th class="text-nowrap text-left" scope="row">Max container width</th>
                                    <td>None (auto)</td>
                                    <td>540px</td>
                                    <td>720px</td>
                                    <td>960px</td>
                                    <td>1140px</td>
                                 </tr>
                                 <tr>
                                    <th class="text-nowrap text-left" scope="row">Class prefix</th>
                                    <td><code>.col-</code></td>
                                    <td><code>.col-sm-</code></td>
                                    <td><code>.col-md-</code></td>
                                    <td><code>.col-lg-</code></td>
                                    <td><code>.col-xl-</code></td>
                                 </tr>
                                 <tr>
                                    <th class="text-nowrap text-left" scope="row"># of columns</th>
                                    <td colspan="5" class="text-left" >12</td>
                                 </tr>
                                 <tr>
                                    <th class="text-nowrap text-left" scope="row">Gutter width</th>
                                    <td colspan="5" class="text-left">30px (15px on each side of a column)</td>
                                 </tr>
                                 <tr>
                                    <th class="text-nowrap text-left" scope="row">Nestable</th>
                                    <td colspan="5" class="text-left">Yes</td>
                                 </tr>
                                 <tr>
                                    <th class="text-nowrap text-left" scope="row">Column ordering</th>
                                    <td colspan="5" class="text-left">Yes</td>
                                 </tr>
                              </tbody>
                           </table>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Equal-width</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>For example, here are two grid layouts that apply to every device and viewport, from <code>xs</code> to <code>xl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>
                           <div class="iq-example-row">
                              <div class="container-fluid">
                                 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                                 <div class="row mb-3">
                                    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                 </div>
                                 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
                                 <div class="row mb-3">
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                 </div>
                                 <!-- Columns are always 50% wide, on mobile and desktop -->
                                 <div class="row">
                                    <div class="col-6">.col-6</div>
                                    <div class="col-6">.col-6</div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Setting one column width</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.</p>
                           <div class="iq-example-row">
                              <div class="container-fluid">
                                 <div class="row mb-3">
                                    <div class="col">
                                       1 of 3
                                    </div>
                                    <div class="col-6">
                                       2 of 3 (wider)
                                    </div>
                                    <div class="col">
                                       3 of 3
                                    </div>
                                 </div>
                                 <div class="row">
                                    <div class="col">
                                       1 of 3
                                    </div>
                                    <div class="col-5">
                                       2 of 3 (wider)
                                    </div>
                                    <div class="col">
                                       3 of 3
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Variable width content</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Use <code>col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p>
                           <div class="iq-example-row">
                              <div class="container-fluid">
                                 <div class="row justify-content-md-center mb-3">
                                    <div class="col col-lg-2">
                                       1 of 3
                                    </div>
                                    <div class="col-md-auto">
                                       Variable width content
                                    </div>
                                    <div class="col col-lg-2">
                                       3 of 3
                                    </div>
                                 </div>
                                 <div class="row">
                                    <div class="col">
                                       1 of 3
                                    </div>
                                    <div class="col-md-auto">
                                       Variable width content
                                    </div>
                                    <div class="col col-lg-2">
                                       3 of 3
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Equal-width multi-row</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Create equal-width columns that span multiple rows by inserting a <code>.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing the <code>.w-100</code> with some <a href="https://getbootstrap.com/" target="_blank">responsive display utilities</a>.</p>
                           <div class="iq-example-row">
                              <div class="container-fluid">
                                 <div class="row">
                                    <div class="col">col</div>
                                    <div class="col">col</div>
                                    <div class="w-100"></div>
                                    <div class="col">col</div>
                                    <div class="col">col</div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Responsive classes</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p>
                           <h4 class="card-title">All breakpoints</h4>
                           <p>For grids that are the same from the smallest of devices to the largest, use the <code>.col</code> and <code>.col-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code>.col</code>.</p>
                           <div class="iq-example-row">
                              <div class="container-fluid">
                                 <div class="row mb-3">
                                    <div class="col">col</div>
                                    <div class="col">col</div>
                                    <div class="col">col</div>
                                    <div class="col">col</div>
                                 </div>
                                 <div class="row">
                                    <div class="col-8">col-8</div>
                                    <div class="col-4">col-4</div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Stacked to horizontal</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Using a single set of <code>.col-sm-*</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code>sm</code>).</p>
                           <div class="iq-example-row">
                              <div class="container-fluid">
                                 <div class="row mb-3">
                                    <div class="col-sm-8">col-sm-8</div>
                                    <div class="col-sm-4">col-sm-4</div>
                                 </div>
                                 <div class="row">
                                    <div class="col-sm">col-sm</div>
                                    <div class="col-sm">col-sm</div>
                                    <div class="col-sm">col-sm</div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Mix and match</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p>
                           <div class="iq-example-row">
                              <div class="container-fluid">
                                 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                                 <div class="row mb-3">
                                    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                 </div>
                                 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
                                 <div class="row mb-3">
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                 </div>
                                 <!-- Columns are always 50% wide, on mobile and desktop -->
                                 <div class="row">
                                    <div class="col-6">.col-6</div>
                                    <div class="col-6">.col-6</div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Gutters</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the <code>.row</code> and matching padding utilities on the <code>.col</code>s. The <code>.container</code> or <code>.container-fluid</code> parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.</p>
                           <p>Here’s an example of customizing the Bootstrap grid at the large (<code>lg</code>) breakpoint and above. We’ve increased the <code>.col</code> padding with <code>.px-lg-5</code>, counteracted that with <code>.mx-lg-n5</code> on the parent <code>.row</code> and then adjusted the <code>.container</code> wrapper with <code>.px-lg-5</code>.</p>
                           <div class="iq-example-row">
                              <div class="container-fluid px-lg-5">
                                 <div class="row mx-lg-n5">
                                    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
                                    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Alignment</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Use flexbox alignment utilities to vertically and horizontally align columns. <strong>Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a <code>min-height</code> as shown below.</strong> <a href="https://github.com/philipwalton/flexbugs#flexbug-3">See Flexbugs #3 for more details.</a></p>
                           <h4 class="mb-3">Vertical alignment</h4>
                           <div class="iq-example-row iq-example-row-flex-cols">
                              <div class="container-fluid">
                                 <div class="row align-items-start">
                                    <div class="col">
                                       One of three columns
                                    </div>
                                    <div class="col">
                                       One of three columns
                                    </div>
                                    <div class="col">
                                       One of three columns
                                    </div>
                                 </div>
                                 <div class="row align-items-center">
                                    <div class="col">
                                       One of three columns
                                    </div>
                                    <div class="col">
                                       One of three columns
                                    </div>
                                    <div class="col">
                                       One of three columns
                                    </div>
                                 </div>
                                 <div class="row align-items-end">
                                    <div class="col">
                                       One of three columns
                                    </div>
                                    <div class="col">
                                       One of three columns
                                    </div>
                                    <div class="col">
                                       One of three columns
                                    </div>
                                 </div>
                              </div>
                              <div class="container-fluid">
                                 <div class="row">
                                    <div class="col align-self-start">
                                       One of three columns
                                    </div>
                                    <div class="col align-self-center">
                                       One of three columns
                                    </div>
                                    <div class="col align-self-end">
                                       One of three columns
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Horizontal alignment</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <p>Create equal-width columns that span multiple rows by inserting a <code>.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing the <code>.w-100</code> with some <a href="/docs/4.3/utilities/display/">responsive display utilities</a>.</p>
                           <div class="iq-example-row">
                              <div class="container-fluid">
                                 <div class="row justify-content-start mb-3">
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                 </div>
                                 <div class="row justify-content-center mb-3">
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                 </div>
                                 <div class="row justify-content-end mb-3">
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                 </div>
                                 <div class="row justify-content-around mb-3">
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                 </div>
                                 <div class="row justify-content-between">
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                    <div class="col-4">
                                       One of two columns
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Footer -->
            <footer class="bg-white iq-footer">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                           <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                           <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                        </ul>
                     </div>
                     <div class="col-lg-6 text-right">
                        Copyright 2020 更多模板：<a href="http://www.mycodes.net/" target="_blank">源码之家</a> All Rights Reserved.
                     </div>
                  </div>
               </div>
            </footer>
            <!-- Footer END -->
         </div>
      </div>
      <!-- Wrapper END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="js/jquery.min.js"></script>
      <script src="js/popper.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <!-- Appear JavaScript -->
      <script src="js/jquery.appear.js"></script>
      <!-- Countdown JavaScript -->
      <script src="js/countdown.min.js"></script>
      <!-- Counterup JavaScript -->
      <script src="js/waypoints.min.js"></script>
      <script src="js/jquery.counterup.min.js"></script>
      <!-- Wow JavaScript -->
      <script src="js/wow.min.js"></script>
      <!-- Apexcharts JavaScript -->
      <script src="js/apexcharts.js"></script>
      <!-- Slick JavaScript -->
      <script src="js/slick.min.js"></script>
      <!-- Select2 JavaScript -->
      <script src="js/select2.min.js"></script>
      <!-- Owl Carousel JavaScript -->
      <script src="js/owl.carousel.min.js"></script>
      <!-- Magnific Popup JavaScript -->
      <script src="js/jquery.magnific-popup.min.js"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script src="js/smooth-scrollbar.js"></script>
      <!-- lottie JavaScript -->
      <script src="js/lottie.js"></script>
      <!-- Chart Custom JavaScript -->
      <script src="js/chart-custom.js"></script>
      <!-- Custom JavaScript -->
      <script src="js/custom.js"></script>
   </body>
</html>